<template>
  <div class="hello">
    <img class="banner-bg" src="@/assets/banner-bg.png"/>
    <div class="content">
      <div class="result">
        <div class="title">税后所得</div>
        <div class="real-income">
          <div><span class="income-num">{{real_income}}</span>&nbsp;元</div>
        </div>
        <div class="minus-info">
          <div>个税：{{tax}}</div>
        </div>
      </div>
      <div class="card">
        <div class="income">
          <div class="location-icon">
            <img src="@/assets/money.png">
          </div>
          <div>
            <input type="number" v-model="income" placeholder="请输入税前薪资">
          </div>
        </div>
      </div>
    </div>
    <TabBar active="final"></TabBar>
  </div>
</template>

<script>
  import TabBar from '@/components/TabBar';

  let finalBonusTax = [
    {
      low_bound: 0,
      tax_ratio: 0.03,
      extra_minus: 0
    },
    {
      low_bound: 3000,
      tax_ratio: 0.1,
      extra_minus: 210
    },
    {
      low_bound: 12000,
      tax_ratio: 0.2,
      extra_minus: 1410
    },
    {
      low_bound: 25000,
      tax_ratio: 0.25,
      extra_minus: 2660
    },
    {
      low_bound: 35000,
      tax_ratio: 0.3,
      extra_minus: 4410
    },
    {
      low_bound: 55000,
      tax_ratio: 0.35,
      extra_minus: 7160
    },
    {
      low_bound: 80000,
      tax_ratio: 0.45,
      extra_minus: 15160
    }
  ]

  export default {
    name: 'About',
    data() {
      return {
        income: 0,
      }
    },
    computed: {
      tax: function () {
        return this.final(this.income)
      },
      real_income: function () {
        return this.income - this.tax
      }
    },
    components: {
      TabBar
    },
    methods: {
      final: function (num) {
        let averageMonth = Math.round(num / 12);
        for (let i = finalBonusTax.length - 1; i >= 0; i--) {
          let taxBound = finalBonusTax[i];
          if (averageMonth >= taxBound.low_bound) {
            return Math.round(num * taxBound.tax_ratio) - taxBound.extra_minus;
          }
        }
        return 0;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body {
    background-color: #ececec;
  }

  .banner-bg {
    width: 100%;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 80px;
  }

  .content .result {
    font-size: 16px;
    color: white;
    text-align: center;
  }

  .content .result .title {
    margin: 20px 0 16px;
  }

  .content .result .real-income .income-num {
    font-size: 48px;
  }

  .content .result .minus-info {
    margin: 20px 0 5px;
    display: flex;
    justify-content: space-around;
  }

  .content .card {
    margin: 16px 16px;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
  }

  .content .card .city {
    color: #aab6c4;
    font-size: 20px;
    display: flex;
    align-items: center;
    margin: 10px 0;
  }

  .content .card .city img {
    width: 20px;
  }

  .content .card .city .location-icon {
    margin: 0 10px;
  }

  .content .card .income {
    display: flex;
    padding: 10px 0;
    background-color: #eeeeee;
    border-radius: 5px;
  }

  .content .card .income .location-icon {
    margin: 0 12px;
  }

  .content .card .income input {
    background: transparent;
    border: none;
    line-height: 24px;
    font-size: 20px;
  }

  .content .card .income input::placeholder {
    color: #9dabbb;
  }

  .content .card .line {
    display: flex;
    justify-content: space-between;
    margin: 10px 5px;
  }

</style>
